/*
 * @Author: Await
 * @Date: 2025-05-06 16:18:25
 * @LastEditors: Await
 * @LastEditTime: 2025-05-06 16:45:30
 * @Description: 3D视图控制配置组件
 */
import React, { useState } from 'react';
import {
    Form,
    Switch,
    InputNumber,
    Slider,
    Row,
    Col,
    Typography,
    Tooltip,
    Divider,
    Card,
    Space
} from 'antd';
import { InfoCircleOutlined, EyeOutlined } from '@ant-design/icons';
import type { ViewControlConfig as ViewControlConfigType } from '../../types/chartTypes';

interface ViewControlConfigProps {
    config?: ViewControlConfigType;
    onChange: (config: ViewControlConfigType) => void;
}

/**
 * 3D视图控制配置组件
 * 
 * 控制3D图表的视角、旋转和缩放等参数
 */
const ViewControlConfig: React.FC<ViewControlConfigProps> = ({ config = {}, onChange }) => {
    // 确保有默认值
    const viewConfig: ViewControlConfigType = {
        autoRotate: false,
        autoRotateSpeed: 10,
        alpha: 30,
        beta: 30,
        distance: 150,
        rotateSensitivity: 1,
        zoomSensitivity: 1,
        ...config
    };

    // 表单项标题组件
    const FormItemLabel = ({ children, tooltip }: { children: React.ReactNode, tooltip?: string }) => (
        <div style={{ marginBottom: 4, display: 'flex', alignItems: 'center' }}>
            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                {children}
            </Typography.Text>
            {tooltip && (
                <Tooltip title={tooltip}>
                    <InfoCircleOutlined style={{ marginLeft: 4, fontSize: 12, color: '#999' }} />
                </Tooltip>
            )}
        </div>
    );

    // 处理配置变更
    const handleConfigChange = (key: string, value: any) => {
        onChange({
            ...viewConfig,
            [key]: value
        });
    };

    return (
        <div style={{ padding: 12, background: '#fff', borderRadius: 4 }}>
            {/* 视图预览区域 */}
            <div
                style={{
                    marginBottom: 16,
                    padding: 16,
                    border: '1px dashed #d9d9d9',
                    borderRadius: 4,
                    backgroundColor: '#fafafa',
                    position: 'relative',
                    height: 120,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    overflow: 'hidden'
                }}
            >
                {/* 3D视图预览 */}
                <div style={{
                    width: 100,
                    height: 100,
                    position: 'relative',
                    transformStyle: 'preserve-3d',
                    transform: `rotateX(${viewConfig.alpha || 30}deg) rotateZ(${viewConfig.beta || 30}deg)`,
                    transition: 'transform 0.3s ease'
                }}>
                    {/* 前面 */}
                    <div style={{
                        position: 'absolute',
                        width: '100%',
                        height: '100%',
                        background: 'rgba(24, 144, 255, 0.4)',
                        transform: 'translateZ(50px)',
                        border: '1px solid rgba(24, 144, 255, 0.8)'
                    }} />
                    {/* 后面 */}
                    <div style={{
                        position: 'absolute',
                        width: '100%',
                        height: '100%',
                        background: 'rgba(24, 144, 255, 0.2)',
                        transform: 'translateZ(-50px)',
                        border: '1px solid rgba(24, 144, 255, 0.4)'
                    }} />
                    {/* 上面 */}
                    <div style={{
                        position: 'absolute',
                        width: '100%',
                        height: '100px',
                        background: 'rgba(82, 196, 26, 0.4)',
                        transform: 'rotateX(90deg) translateZ(50px)',
                        border: '1px solid rgba(82, 196, 26, 0.8)'
                    }} />
                    {/* 下面 */}
                    <div style={{
                        position: 'absolute',
                        width: '100%',
                        height: '100px',
                        background: 'rgba(82, 196, 26, 0.2)',
                        transform: 'rotateX(-90deg) translateZ(50px)',
                        border: '1px solid rgba(82, 196, 26, 0.4)'
                    }} />
                    {/* 右边 */}
                    <div style={{
                        position: 'absolute',
                        width: '100px',
                        height: '100%',
                        background: 'rgba(245, 34, 45, 0.4)',
                        transform: 'rotateY(90deg) translateZ(50px)',
                        border: '1px solid rgba(245, 34, 45, 0.8)'
                    }} />
                    {/* 左边 */}
                    <div style={{
                        position: 'absolute',
                        width: '100px',
                        height: '100%',
                        background: 'rgba(245, 34, 45, 0.2)',
                        transform: 'rotateY(-90deg) translateZ(50px)',
                        border: '1px solid rgba(245, 34, 45, 0.4)'
                    }} />
                </div>
                <Typography.Text
                    style={{
                        position: 'absolute',
                        bottom: 8,
                        right: 8,
                        fontSize: 12,
                        color: '#999'
                    }}
                >
                    <EyeOutlined style={{ marginRight: 4 }} />
                    视图预览
                </Typography.Text>
            </div>

            <Typography.Title level={5} style={{ margin: 0, marginBottom: 16 }}>
                3D视图控制
                <Tooltip title="控制3D图表的视角和交互参数">
                    <InfoCircleOutlined style={{ fontSize: 14, marginLeft: 8 }} />
                </Tooltip>
            </Typography.Title>

            <Divider orientation="left" style={{ margin: '12px 0', fontSize: 12 }}>视角控制</Divider>

            <Row gutter={[16, 16]}>
                <Col span={12}>
                    <FormItemLabel tooltip="X轴旋转角度 (0-90)">
                        俯仰角(Alpha)
                    </FormItemLabel>
                    <InputNumber
                        value={viewConfig.alpha || 30}
                        onChange={value => handleConfigChange('alpha', value)}
                        min={0}
                        max={90}
                        style={{ width: '100%' }}
                        size="small"
                    />
                    <Slider
                        value={viewConfig.alpha || 30}
                        onChange={value => handleConfigChange('alpha', value)}
                        min={0}
                        max={90}
                        step={1}
                    />
                </Col>
                <Col span={12}>
                    <FormItemLabel tooltip="Y轴旋转角度 (0-360)">
                        旋转角(Beta)
                    </FormItemLabel>
                    <InputNumber
                        value={viewConfig.beta || 30}
                        onChange={value => handleConfigChange('beta', value)}
                        min={0}
                        max={360}
                        style={{ width: '100%' }}
                        size="small"
                    />
                    <Slider
                        value={viewConfig.beta || 30}
                        onChange={value => handleConfigChange('beta', value)}
                        min={0}
                        max={360}
                        step={5}
                    />
                </Col>
                <Col span={12}>
                    <FormItemLabel tooltip="相机距离">
                        缩放距离
                    </FormItemLabel>
                    <InputNumber
                        value={viewConfig.distance || 150}
                        onChange={value => handleConfigChange('distance', value)}
                        min={50}
                        max={400}
                        style={{ width: '100%' }}
                        size="small"
                    />
                    <Slider
                        value={viewConfig.distance || 150}
                        onChange={value => handleConfigChange('distance', value)}
                        min={50}
                        max={400}
                        step={10}
                    />
                </Col>
                <Col span={12}>
                    <FormItemLabel tooltip="视角中心点">
                        中心点
                    </FormItemLabel>
                    <Row gutter={8}>
                        <Col span={8}>
                            <InputNumber
                                value={viewConfig.center?.[0] || 0}
                                onChange={value => handleConfigChange('center', [value, viewConfig.center?.[1] || 0, viewConfig.center?.[2] || 0])}
                                size="small"
                                placeholder="X"
                                style={{ width: '100%' }}
                            />
                        </Col>
                        <Col span={8}>
                            <InputNumber
                                value={viewConfig.center?.[1] || 0}
                                onChange={value => handleConfigChange('center', [viewConfig.center?.[0] || 0, value, viewConfig.center?.[2] || 0])}
                                size="small"
                                placeholder="Y"
                                style={{ width: '100%' }}
                            />
                        </Col>
                        <Col span={8}>
                            <InputNumber
                                value={viewConfig.center?.[2] || 0}
                                onChange={value => handleConfigChange('center', [viewConfig.center?.[0] || 0, viewConfig.center?.[1] || 0, value])}
                                size="small"
                                placeholder="Z"
                                style={{ width: '100%' }}
                            />
                        </Col>
                    </Row>
                </Col>
            </Row>

            <Divider orientation="left" style={{ margin: '12px 0', fontSize: 12 }}>自动旋转</Divider>

            <Row gutter={[16, 16]}>
                <Col span={12}>
                    <FormItemLabel tooltip="启用自动旋转">
                        自动旋转
                    </FormItemLabel>
                    <Switch
                        checked={viewConfig.autoRotate}
                        onChange={value => handleConfigChange('autoRotate', value)}
                        size="small"
                    />
                </Col>
                {viewConfig.autoRotate && (
                    <Col span={12}>
                        <FormItemLabel tooltip="自动旋转速度">
                            旋转速度
                        </FormItemLabel>
                        <InputNumber
                            value={viewConfig.autoRotateSpeed || 10}
                            onChange={value => handleConfigChange('autoRotateSpeed', value)}
                            min={1}
                            max={100}
                            style={{ width: '100%' }}
                            size="small"
                        />
                        <Slider
                            value={viewConfig.autoRotateSpeed || 10}
                            onChange={value => handleConfigChange('autoRotateSpeed', value)}
                            min={1}
                            max={50}
                        />
                    </Col>
                )}
            </Row>

            <Divider orientation="left" style={{ margin: '12px 0', fontSize: 12 }}>旋转限制</Divider>

            <Row gutter={[16, 16]}>
                <Col span={12}>
                    <FormItemLabel tooltip="Alpha角度最小值">
                        最小俯仰角
                    </FormItemLabel>
                    <InputNumber
                        value={viewConfig.minAlpha || 0}
                        onChange={value => handleConfigChange('minAlpha', value)}
                        min={-90}
                        max={90}
                        style={{ width: '100%' }}
                        size="small"
                    />
                </Col>
                <Col span={12}>
                    <FormItemLabel tooltip="Alpha角度最大值">
                        最大俯仰角
                    </FormItemLabel>
                    <InputNumber
                        value={viewConfig.maxAlpha || 90}
                        onChange={value => handleConfigChange('maxAlpha', value)}
                        min={-90}
                        max={90}
                        style={{ width: '100%' }}
                        size="small"
                    />
                </Col>
                <Col span={12}>
                    <FormItemLabel tooltip="Beta角度最小值">
                        最小旋转角
                    </FormItemLabel>
                    <InputNumber
                        value={viewConfig.minBeta || 0}
                        onChange={value => handleConfigChange('minBeta', value)}
                        min={-360}
                        max={360}
                        style={{ width: '100%' }}
                        size="small"
                    />
                </Col>
                <Col span={12}>
                    <FormItemLabel tooltip="Beta角度最大值">
                        最大旋转角
                    </FormItemLabel>
                    <InputNumber
                        value={viewConfig.maxBeta || 360}
                        onChange={value => handleConfigChange('maxBeta', value)}
                        min={-360}
                        max={360}
                        style={{ width: '100%' }}
                        size="small"
                    />
                </Col>
            </Row>

            <Divider orientation="left" style={{ margin: '12px 0', fontSize: 12 }}>交互灵敏度</Divider>

            <Row gutter={[16, 16]}>
                <Col span={12}>
                    <FormItemLabel tooltip="旋转灵敏度">
                        旋转灵敏度
                    </FormItemLabel>
                    <InputNumber
                        value={viewConfig.rotateSensitivity || 1}
                        onChange={value => handleConfigChange('rotateSensitivity', value)}
                        min={0.1}
                        max={5}
                        step={0.1}
                        style={{ width: '100%' }}
                        size="small"
                    />
                    <Slider
                        value={viewConfig.rotateSensitivity || 1}
                        onChange={value => handleConfigChange('rotateSensitivity', value)}
                        min={0.1}
                        max={5}
                        step={0.1}
                    />
                </Col>
                <Col span={12}>
                    <FormItemLabel tooltip="缩放灵敏度">
                        缩放灵敏度
                    </FormItemLabel>
                    <InputNumber
                        value={viewConfig.zoomSensitivity || 1}
                        onChange={value => handleConfigChange('zoomSensitivity', value)}
                        min={0.1}
                        max={5}
                        step={0.1}
                        style={{ width: '100%' }}
                        size="small"
                    />
                    <Slider
                        value={viewConfig.zoomSensitivity || 1}
                        onChange={value => handleConfigChange('zoomSensitivity', value)}
                        min={0.1}
                        max={5}
                        step={0.1}
                    />
                </Col>
                <Col span={12}>
                    <FormItemLabel tooltip="缩放距离最小值">
                        最小距离
                    </FormItemLabel>
                    <InputNumber
                        value={viewConfig.minDistance || 50}
                        onChange={value => handleConfigChange('minDistance', value)}
                        min={10}
                        max={200}
                        style={{ width: '100%' }}
                        size="small"
                    />
                </Col>
                <Col span={12}>
                    <FormItemLabel tooltip="缩放距离最大值">
                        最大距离
                    </FormItemLabel>
                    <InputNumber
                        value={viewConfig.maxDistance || 400}
                        onChange={value => handleConfigChange('maxDistance', value)}
                        min={100}
                        max={1000}
                        style={{ width: '100%' }}
                        size="small"
                    />
                </Col>
            </Row>
        </div>
    );
};

export default ViewControlConfig; 